<!DOCTYPE html>
<html>
<head>
    <title>05_控制CSS样式</title>

    <meta charset="UTF-8"/>

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>

    <meta name="HandheldFriendly" content="true"/>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>

    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <link href="./asset/gitbook/style.css" type="text/css" rel="stylesheet"/>
    <link href="./asset/gitbook/istyle.css" type="text/css" rel="stylesheet"/>

    <style type="text/css">
        
            span.md_line{margin-bottom:0.5em; display:block; line-height:1.89}
            .md_line br{ display: none;}
            
    </style>

    <script>
        var flowchat_options = {
            'x': 0, 'y': 0, 'line-width': 1, 'line-length': 50, 'text-margin': 10, 'font-size': 13,
            'font-color': '#3c3c3c', 'line-color': '#666666', 'element-color': '#666666', 'fill': 'transparent',
            'yes-text': 'yes', 'no-text': 'no', 'arrow-end': 'block', 'class': 'flowchart', 'scale': 1,
            'symbols': { 'start': {}, 'end': {}, 'condition': {}, 'inputoutput': {}, 'operation': {}, 'subroutine': {}}
        }
    </script>
    <script type="text/javascript" src="./asset/other/raphael-min.js"></script>
    <script type="text/javascript" src="./asset/other/flowchart.js"></script>
    <script type="text/javascript" src="./asset/other/echarts.min.js"></script>


</head>

<body>





<div data-basepath="/service/gitbook" class="book">
    <div class="book-summary">
        <ul class="summary">
            <li>
                <a href="./index.html">笔记</a>
            </li>
            <li class="divider"></li>
            
                
                
    
    <li data-level="1" class="chapter" data-path="01_JavaScript基本语法.html">
        
        
        <a href="./01_JavaScript基本语法.html" ><b>1</b> 第一章:JavaScript基本语法</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="2" class="chapter" data-path="02_函数与window对象.html">
        
        
        <a href="./02_函数与window对象.html" ><b>2</b> 第二章_函数与window对象</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="3" class="chapter" data-path="03_DOM编程.html">
        
        
        <a href="./03_DOM编程.html" ><b>3</b> 03_DOM编程</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="4" class="chapter" data-path="04_DOM高级编程.html">
        
        
        <a href="./04_DOM高级编程.html" ><b>4</b> 04_DOM高级编程</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="5" class="chapter active" data-path="05_控制CSS样式.html">
        
        
        <a href="./05_控制CSS样式.html" ><b>5</b> 05_控制CSS样式</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="6" class="chapter" data-path="06_表单验证及操作基础.html">
        
        
        <a href="./06_表单验证及操作基础.html" ><b>6</b> 06_表单验证及操作基础</a>
        
            
                    
                
        
    </li>

            
        </ul>

    </div>

    <div class="book-body">
        <div class="body-inner">

            <div class="book-header" role="navigation">
                <h1>
                    <a href="./index.html" > 笔记</a>
                </h1>
            </div>

            <div tabindex="-1" class="page-wrapper">
                <div class="page-inner">
                    <h2 class="post_title"> 05_控制CSS样式 </h2>
                    <div class="post_body"> <p class="md_block">

<div class="toc"><ul>
<li>
<a href="#toc_0">05_控制CSS样式</a>
</li>
</ul>
</div>
</p>


<p class="md_block">
    <span class="md_line">刚实现的代码</span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">style</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>
            <span class="nn">#div1</span><span class="p">{</span>
                <span class="nb">height</span><span class="o">:</span> <span class="m">2000px</span><span class="p">;</span>
                <span class="nb">width</span><span class="o">:</span> <span class="m">3000px</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="nn">#div2</span><span class="p">{</span>
                <span class="nb">width</span><span class="o">:</span> <span class="m">200px</span><span class="p">;</span>
                <span class="nb">height</span><span class="o">:</span> <span class="m">150px</span><span class="p">;</span>
                <span class="nb">position</span><span class="o">:</span> <span class="nb">absolute</span><span class="p">;</span>
                <span class="nb">top</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span>
                <span class="nb">right</span><span class="o">:</span> <span class="m">5px</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="nn">#div2</span><span class="o">&gt;</span><span class="nn">#close</span><span class="p">{</span>
                <span class="nb">border</span><span class="o">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#000</span><span class="p">;</span>
                <span class="nb">width</span><span class="o">:</span> <span class="m">1em</span><span class="p">;</span>
                <span class="nb">height</span><span class="o">:</span> <span class="m">1em</span><span class="p">;</span>
                <span class="nb">text-align</span><span class="o">:</span> <span class="nb">center</span><span class="p">;</span>
                <span class="nb">position</span><span class="o">:</span> <span class="nb">absolute</span><span class="p">;</span>
                <span class="nb">right</span><span class="o">:</span> <span class="m">0px</span><span class="p">;</span>
                <span class="nb">cursor</span><span class="o">:</span> <span class="nb">pointer</span><span class="p">;</span>
            <span class="p">}</span>
            
        <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
            <span class="err">/*var div2;</span>
            <span class="kd">var</span> <span class="nx">sTop</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span><span class="c1">//滚动条顶部距离</span>
            <span class="kd">var</span> <span class="nx">sLeft</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span><span class="c1">//滚动条右边的距离</span>
            <span class="kd">var</span> <span class="nx">div2Top</span><span class="p">;</span><span class="c1">//CSS设置为100px</span>
            <span class="kd">var</span> <span class="nx">div2Right</span><span class="p">;</span><span class="c1">//CSS设置为5px</span>
            <span class="c1">//当页面加载完成事件</span>
            <span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
                <span class="nx">div2</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;div2&#39;</span><span class="p">);</span>
                <span class="c1">//获取DIV2的项部距离</span>
                <span class="nx">div2Top</span> <span class="o">=</span> <span class="nx">div2</span><span class="p">.</span><span class="nx">offsetTop</span><span class="p">;</span>
                <span class="c1">//获取计算后样式</span>
                <span class="kd">var</span> <span class="nx">sty</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">getComputedStyle</span> <span class="o">?</span> <span class="nb">window</span><span class="p">.</span><span class="nx">getComputedStyle</span><span class="p">(</span><span class="nx">div2</span><span class="p">,</span><span class="kc">null</span><span class="p">)</span> <span class="o">:</span> <span class="nx">div2</span><span class="p">.</span><span class="nx">currentStyle</span><span class="p">;</span>
                <span class="c1">//获取div2计算后的右边距CSS值.</span>
                <span class="nx">div2Right</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">sty</span><span class="p">.</span><span class="nx">right</span><span class="p">);</span><span class="c1">//转整数</span>
            <span class="p">}</span>
            <span class="c1">//当网页滚动动条滚动时事件</span>
            <span class="nb">window</span><span class="p">.</span><span class="nx">onscroll</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
                <span class="c1">//获取垂直滚动条向下滚动的距离</span>
                <span class="nx">sTop</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">scrollTop</span> <span class="o">|</span> <span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">scrollTop</span><span class="p">;</span>
                <span class="c1">//获取水平滚动条向右滚动的距离</span>
                <span class="nx">sLeft</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">scrollLeft</span> <span class="o">|</span> <span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">scrollLeft</span><span class="p">;</span>
                <span class="c1">//设置DIV2的顶部距离</span>
                <span class="nx">div2</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">top</span> <span class="o">=</span> <span class="p">(</span><span class="nx">sTop</span> <span class="o">+</span> <span class="nx">div2Top</span><span class="p">)</span><span class="o">+</span><span class="s1">&#39;px&#39;</span><span class="p">;</span>
                <span class="c1">//设置DIV2的右边距离</span>
                <span class="nx">div2</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">right</span> <span class="o">=</span> <span class="p">(</span><span class="nx">div2Right</span> <span class="o">-</span> <span class="nx">sLeft</span><span class="p">)</span><span class="o">+</span><span class="s1">&#39;px&#39;</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="kd">function</span> <span class="nx">div2Close</span><span class="p">(){</span>
                <span class="nx">div2</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="s1">&#39;none&#39;</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;div1&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;div2&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;close&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;div2Close()&quot;</span><span class="p">&gt;</span>
                X
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">img</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;img1&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/xiao.jpg&quot;</span><span class="p">/&gt;</span>
            
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<p class="md_block">
    <span class="md_line">修改后的代码</span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">style</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>
            <span class="nn">#div1</span><span class="p">{</span>
                <span class="nb">height</span><span class="o">:</span> <span class="m">2000px</span><span class="p">;</span>
                <span class="nb">width</span><span class="o">:</span> <span class="m">3000px</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="nn">#div2</span><span class="p">{</span>
                <span class="nb">width</span><span class="o">:</span> <span class="m">200px</span><span class="p">;</span>
                <span class="nb">height</span><span class="o">:</span> <span class="m">150px</span><span class="p">;</span>
                <span class="nb">position</span><span class="o">:</span> <span class="nb">absolute</span><span class="p">;</span>
                <span class="nb">top</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span>
                <span class="nb">right</span><span class="o">:</span> <span class="m">5px</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="nn">#div2</span><span class="o">&gt;</span><span class="nn">#close</span><span class="p">{</span>
                <span class="nb">border</span><span class="o">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#000</span><span class="p">;</span>
                <span class="nb">width</span><span class="o">:</span> <span class="m">1em</span><span class="p">;</span>
                <span class="nb">height</span><span class="o">:</span> <span class="m">1em</span><span class="p">;</span>
                <span class="nb">text-align</span><span class="o">:</span> <span class="nb">center</span><span class="p">;</span>
                <span class="nb">position</span><span class="o">:</span> <span class="nb">absolute</span><span class="p">;</span>
                <span class="nb">right</span><span class="o">:</span> <span class="m">0px</span><span class="p">;</span>
                <span class="nb">cursor</span><span class="o">:</span> <span class="nb">pointer</span><span class="p">;</span>
            <span class="p">}</span>
            
        <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
            <span class="kd">var</span> <span class="nx">div2</span><span class="p">;</span>
            <span class="kd">var</span> <span class="nx">sTop</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span><span class="c1">//滚动条顶部距离</span>
            <span class="kd">var</span> <span class="nx">sLeft</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span><span class="c1">//滚动条右边的距离</span>
            <span class="kd">var</span> <span class="nx">div2Top</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span><span class="c1">//广告图片距网页顶部距离</span>
            <span class="kd">var</span> <span class="nx">div2Right</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span><span class="c1">//广告图片距网页右边距离</span>
            <span class="kd">var</span> <span class="nx">img1</span><span class="p">;</span>
            <span class="kd">var</span> <span class="nx">imgSrc</span> <span class="o">=</span> <span class="s1">&#39;img/u002.jpg&#39;</span><span class="p">;</span><span class="c1">//图片地址</span>
            <span class="kd">var</span> <span class="nx">imgWidth</span> <span class="o">=</span> <span class="mi">200</span><span class="p">;</span><span class="c1">//图片宽度</span>
            <span class="kd">var</span> <span class="nx">imgHeight</span> <span class="o">=</span> <span class="mi">300</span><span class="p">;</span><span class="c1">//图片高度</span>
            <span class="c1">//当页面加载完成事件</span>
            <span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
                <span class="nx">div2</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;div2&#39;</span><span class="p">);</span>
                <span class="c1">//获取DIV2的项部距离</span>
                <span class="c1">//div2Top = div2.offsetTop;</span>
                <span class="c1">//获取计算后样式</span>
                <span class="c1">//var sty = window.getComputedStyle ? window.getComputedStyle(div2,null) : div2.currentStyle;</span>
                <span class="c1">//获取div2计算后的右边距CSS值.</span>
                <span class="c1">//div2Right = parseInt(sty.right);//转整数</span>
                <span class="nx">img1</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;img1&#39;</span><span class="p">);</span>
                <span class="nx">img1</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nx">imgSrc</span><span class="p">;</span><span class="c1">//设置图片地址</span>
                
                <span class="nx">div2</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">top</span> <span class="o">=</span> <span class="nx">div2Top</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span><span class="p">;</span>
                <span class="nx">div2</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">right</span> <span class="o">=</span> <span class="nx">div2Right</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span><span class="p">;</span>
                <span class="nx">div2</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">imgWidth</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span><span class="p">;</span><span class="c1">//设置宽度</span>
                <span class="nx">div2</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nx">imgHeight</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span><span class="p">;</span><span class="c1">//设置高度</span>
                <span class="nx">img1</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">imgWidth</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span><span class="p">;</span><span class="c1">//设置图片宽度</span>
                <span class="nx">img1</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nx">imgHeight</span> <span class="o">+</span> <span class="s1">&#39;px&#39;</span><span class="p">;</span><span class="c1">//设置高度</span>
            <span class="p">}</span>
            <span class="c1">//当网页滚动动条滚动时事件</span>
            <span class="nb">window</span><span class="p">.</span><span class="nx">onscroll</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
                <span class="c1">//获取垂直滚动条向下滚动的距离</span>
                <span class="nx">sTop</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">scrollTop</span> <span class="o">|</span> <span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">scrollTop</span><span class="p">;</span>
                <span class="c1">//获取水平滚动条向右滚动的距离</span>
                <span class="nx">sLeft</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">scrollLeft</span> <span class="o">|</span> <span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">scrollLeft</span><span class="p">;</span>
                <span class="c1">//设置DIV2的顶部距离</span>
                <span class="nx">div2</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">top</span> <span class="o">=</span> <span class="p">(</span><span class="nx">sTop</span> <span class="o">+</span> <span class="nx">div2Top</span><span class="p">)</span><span class="o">+</span><span class="s1">&#39;px&#39;</span><span class="p">;</span>
                <span class="c1">//设置DIV2的右边距离</span>
                <span class="nx">div2</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">right</span> <span class="o">=</span> <span class="p">(</span><span class="nx">div2Right</span> <span class="o">-</span> <span class="nx">sLeft</span><span class="p">)</span><span class="o">+</span><span class="s1">&#39;px&#39;</span><span class="p">;</span>
                
                <span class="c1">//获取浏览器宽度</span>
                <span class="c1">//alert(window.innerWidth | document.body.clientWidth);</span>
            <span class="p">}</span>
            <span class="kd">function</span> <span class="nx">div2Close</span><span class="p">(){</span>
                <span class="nx">div2</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="s1">&#39;none&#39;</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;div1&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;div2&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;close&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;div2Close()&quot;</span><span class="p">&gt;</span>
                X
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">img</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;img1&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/xiao.jpg&quot;</span><span class="p">/&gt;</span>
            
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end--> </div>
                </div>
            </div>

        </div>

    </div>

</div>


<script type="text/javascript" src="./asset/gitbook/app.js"></script>

<script>require(["gitbook"], function (gitbook) {
    var config = {"fontSettings": {"theme": null, "family": "sans", "size": 2}};
    gitbook.start(config);
});

</script>





</body>

</html>